<script lang='ts' setup>
import { EFormItemType } from '../enum'
import { IFormItem } from "../type"
import FormOptions from "./edit-item/edit/fat-form-create-editor-item-edit.vue";

interface IProps {
  item: IFormItem;
  modelValue: boolean;
}
interface IEmit {
  (event: "update:modelValue", data: boolean): void;
}
const props = defineProps<IProps>()
const emit = defineEmits<IEmit>()
const show = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit("update:modelValue", val)
  }
})
const title = computed(() => {
  return EFormItemType[props.item.type]
})
function close() {
  emit("update:modelValue", false)
}

</script>

<template>
  <el-drawer :title="title" v-model="show" direction="rtl" modal-class="drawer-model">
    <el-form :model="item" size="small" label-position="right">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="字段key">
            <el-tooltip content="在表中的唯一标识,推荐使用英文字母开头,例: name" placement="top" trigger="hover">
              <el-input v-model="item.key" auto-complete="off"></el-input>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="字段名称">
            <el-tooltip content="#n表示数组中的序号,例: 第#n次测试" placement="top" trigger="hover">
              <el-input v-model="item.label" auto-complete="off"></el-input>
            </el-tooltip>

          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="宽度">
            <el-slider v-model="item.span" :min="6" :max="24"></el-slider>
          </el-form-item>
        </el-col>
      </el-row>
      <FormOptions :item="item" />
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">关 闭</el-button>
    </div>
  </el-drawer>
</template>

<style lang='scss'>
.drawer-model {
  // backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.1) !important;

  .el-drawer {
    width: 420px !important;
    padding: 0 !important;
  }
}
</style>